<template>
  <div class="song">
    <div class="left">
      <loader v-if="!song || !comment"></loader>
      <div class="song-info" v-else>
        <div class="song-img">
          <img :src="song.al.picUrl" :alt="song.name" />
        </div>
        <div class="song-title">
          <song-title :song="song" :comment="comment.total"></song-title>
          <irc :irc="irc"></irc>
        </div>
      </div>
      <loader v-if="!comment"></loader>
      <div class="comment" v-else>
        <sort-bar>
          <template #left>评论</template>
          <template #center>共{{comment.total}}条评论</template>
        </sort-bar>
        <my-comment></my-comment>
        <comment :comment="comment" @pageChange="pageChange"></comment>
      </div>
    </div>
    <div class="recommend">
      <same-playlist :playlist="playlist"></same-playlist>
      <same-song :songlist="songlist"></same-song>
    </div>
    <back-top></back-top>
  </div>
</template>

<script>
import Irc from './childcpns/Irc'
import SongTitle from './childcpns/SongTitle'
import SamePlaylist from './childcpns/SamePlaylist'
import SameSong from './childcpns/SameSong'

import Comment from '@/components/common/comment/Comment'
import BackTop from '@/components/common/backtop/BackTop'
import MyComment from '@/components/common/mycomment/MyComment'

import SortBar from '@/components/content/sortbar/SortBar'
import Loader from '@/components/common/loader/Loader'

import { _getsongdetail, _getLrc, _sameSong, _samePlaylist, _getComment } from '@/network/songdetail'

export default {
  components: {
    SongTitle,
    Irc,
    SamePlaylist,
    SameSong,
    Comment,
    BackTop,
    MyComment,
    SortBar,
    Loader
  },
  data() {
    return {
      id: null,
      song: null,
      irc: null,
      songlist: null,
      playlist: null,
      comment: null
    }
  },
  created() {
    this.id = this.$route.query.id;
    // 获取歌曲详情
    _getsongdetail(this.id).then(res => {
      this.song = res.songs[0]
    })
    // 获取歌词
    _getLrc(this.id).then(res => {
      this.irc = res.lrc
    })
    // 获取相似歌曲
    _sameSong(this.id).then(res => {
      this.songlist = res.songs
    })
    // 获取相似歌单
    _samePlaylist(this.id).then(res => {
      this.playlist = res.playlists
    })
    // 获取评论
    _getComment(this.id).then(res => {
      this.comment = res
    })
  },
  watch: {
    '$route'(to, from) {
      if (to.query.id !== from.query.id) {
        this.init()
      }
    }
  },
  methods: {
    init() {
      // 改变路由参数时，重新获取所有数据
      this.id = this.$route.query.id;
      _getsongdetail(this.id).then(res => {
        this.song = res.songs[0]
      })
      _getLrc(this.id).then(res => {
        this.irc = res.lrc
      })
      _sameSong(this.id).then(res => {
        this.songlist = res.songs
      })
      _samePlaylist(this.id).then(res => {
        this.playlist = res.playlists
      })
      _getComment(this.id).then(res => {
        this.comment = res
      })
    },
    // 页码改变，切换评论
    pageChange(val) {
      _getComment(this.id, (val - 1) * 20).then(res => {
        this.comment = res
      })
    }
  }
}
</script>

<style scoped>
.song {
  display: flex;
  margin: 0 auto;
  width: 980px;
  background-color: #fff;
}
.left {
  width: 730px;
  padding: 30px 20px 30px 40px;
  border-right: 1px solid #aaa;
  box-sizing: border-box;
}

/* 歌曲信息部分 */
.song-info {
  display: flex;
  width: 670px;
}

/* 左边图片 */
.song-img {
  border-radius: 50%;
  margin-right: 20px;
  width: 205px;
  height: 205px;
  background: url(~@/assets/img/song.png);
}
.song-img img {
  margin: 37px 0 0 37px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
}

/* 中间的标题 */
.song-title {
  width: 445px;
  font-size: 13px;
}

/* 右边推荐区域 */
.recommend {
  width: 250px;
  padding: 20px 40px 20px 30px;
}

/* 评论区域 */
.sort-bar >>> .left,
.sort-bar >>> .center {
  color: #666;
  text-align: left;
}
.sort-bar >>> .left {
  flex: 3;
}

.comment {
  padding: 30px 40px 0;
}
</style>